import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep';
import '@/assets/css/coupon.css'; // 引入样式
import TabBar from '@/components/TabBar';// 引入底部导航栏
// 引入类型声明文件
import type business from "@/types/business";
import type { receive } from "@/types/coupon";

// 我的优惠券页面
const Coupon = () => {
  // 状态管理
  // 获取全局挂载的用户信息
  const [business] = useState<business>(React.business);
  // 保存我的优惠券数据
  const [list, setList] = useState<receive[]>([]);
  // 声明状态值
  const [status, setStatus] = useState<string>('all');
  // 声明是否还有更多内容，hasMore的值是true时会自动执行上拉加载
  const [hasMore, setHasMore] = useState<boolean>(true);
  // 声明当前页
  const [page, setPage] = useState<number>(1);
  // 声明当前列表条数
  const [ListCount, setListCount] = useState<number>(0);

  // 获取数据方法
  const fetchData = async () => {
    // 组装参数
    const params = {
      busid: business.id,
      status,
      page
    };
    // 发起请求
    const result = await React.Http.post('/business/coupon', params);
    // 处理请求结果
    if (result.code === 1) {
      const count = result.data.count ?? 0;
      // 加载更多时合并数据
      setList(v => {
        const newList = [...v, ...result.data.list];
        setListCount(newList.length);
        return newList;
      });
      // 停止条件
      if (count === ListCount) {
        setHasMore(false);
        return;
      }
      // 继续加载
      setHasMore(true);
      setPage(page => page + 1);
    } else {
      React.fail(result.msg);
      // 加载完成 -> 设置完成
      setHasMore(false);
    }
  }

  // tab栏切换
  useEffect(() => {
    setPage(1); // 重置页码
    setList([]); // 清空列表
    setListCount(0); // 重置当前列表条数
    setHasMore(true); // 重置加载更多状态
  }, [status]); // 监听status发生变化

  // 下拉刷新
  const OnRefresh = async () => {
    await sleep(1000);
    setPage(1); // 重置分页
    setList([]); // 清空列表
    setHasMore(true); // 重置加载更多状态
  }

  // 上拉加载
  const loadMore = async () => {
    await sleep(1000);
    await fetchData();
  }

  // 跳转到去使用（商品页）
  const ToProduct = () => {
    React.navigate('/');
  }

  return (
    <>
      <div className="top">
        <div>我的优惠券</div>
      </div>
      {/* tab栏 */}
      <div className="coupon_tabs">
        <li className={status === 'all' ? 'active' : ''}
          onClick={() => setStatus('all')}>
          全部
        </li>
        <li className={status === '1' ? 'active' : ''}
          onClick={() => setStatus('1')}>
          未使用
        </li>
        <li className={status === '0' ? 'active' : ''}
          onClick={() => setStatus('0')}>
          已使用
        </li>
      </div>
      {/* 下拉刷新 */}
      <React.UI.PullToRefresh onRefresh={OnRefresh}>
        <div className="coupon_list">
          {
            list.map((item: receive, index: number) => (
              <div className="coupon_item" key={index}>
                <div className="item_content">
                  <NavLink to={`/coupon/info?couponid=${item.cid}`}>
                    <div className="left">
                      {parseFloat(item.coupon.rate) * 100}<span>折</span>
                    </div>
                    <div className="right">
                      <div>{item.coupon.title}</div>
                      {/* <div>订单满<span>100元</span>打<span>8折</span></div> */}
                      <div>领取时间:{item.coupon.createtime_date}</div>
                      <div>到期时间:{item.coupon.endtime_date}</div>
                    </div>
                  </NavLink>
                </div>
                <div className="item_btn">
                  <React.UI.Button
                    disabled={item.status === '0'}
                    color={item.status === '0' ? "default" : "primary"}
                    size='mini'
                    onClick={ToProduct}
                  >
                    {item.status === '0' ? "已使用" : "去使用"}
                  </React.UI.Button>
                </div>
              </div>
            ))
          }
        </div>
        {/* 上拉加载 */}
        <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </React.UI.PullToRefresh>
      {/* 底部导航栏 */}
      <TabBar />
    </>
  )
}

export default Coupon;